<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="tag" label="标签">
            </el-table-column>
            <el-table-column prop="id" label="密钥ID">
            </el-table-column>
            <el-table-column prop="authority" label="访问权限">
            </el-table-column>
            <el-table-column label="密钥状态">
                <template #default="scope">
                    {{ scope.row.online ? "使用中" : "未使用" }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间">
                <template #default="scope">
                    {{ scope.row.cTime }}
                </template>
            </el-table-column>
            <el-table-column label="更新时间">
                <template #default="scope">
                    {{ scope.row.uTime }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button @click="open(scope.row)" type="primary" icon="el-icon-edit"></el-button>
                    <el-button @click="del(scope.$index, scope.row.id)" type="danger" icon="el-icon-delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { $GetKeyListData, $DelKeyFn } from "@/api"
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";
// import FillterMixin from "@/mixins/FillterMixin"
export default defineComponent({
    name: 'GatewayTable',
    setup() {
        const router = useRouter()
        const Data = reactive({
            tableData: [],
            pageObj: {
                currPage: 1,
                pageSize: 5,
                eui: '',
                online: 'all',
                agreement: '',
                data: ''
            },
            total: 1,
        })
        onMounted(() => {
            getData()
        })
        const open = (obj: any) => {
            router.push({
                path: '/safety/addkey',
                query: {
                    id: obj.id
                }
            })
        }
        const getData = () => {
            $GetKeyListData(Data.pageObj).then(res => {
                Data.tableData = res.data.data;
                Data.total = res.data.total;
            })
        }
        const del = (index: any, id: any) => {
            // this.$confirm('确定要删除吗？', { type: 'warning' }).then(() => {
            $DelKeyFn({ id: id }).then(res => {
                if (res.data.msg == "success") {
                    Data.tableData.splice(index, 1)
                    ElMessage({
                        message: '删除成功！',
                        type: 'success',
                    })
                }
            })

            // })

        }


        return { ...toRefs(Data), open, del }
    }
    // data() {
    //     return {
    //         tableData: [],
    //         pageObj: {
    //             currPage: 1,
    //             pageSize: 5,
    //             eui: '',
    //             online: null,
    //             agreement: '',
    //             data: null
    //         },
    //         total: 1,
    //     };
    // },

    // mounted() {
    //     this.getData()
    // },
    // // mixins: [FillterMixin],
    // methods: {
    //     open(obj) {
    //         this.$router.push({
    //             path: '/safety/addkey',
    //             query: {
    //                 id: obj.id
    //             }
    //         })
    //     },
    //     getData() {
    //         $GetKeyListData(this.pageObj).then(res => {
    //             this.tableData = res.data.data;
    //             this.total = res.data.total;
    //         })
    //     },
    //     del(index, id) {
    //         this.$confirm('确定要删除吗？', { type: 'warning' }).then(() => {
    //             $DelKeyFn({ id: id }).then(res => {
    //                 if (res.data.msg == "success") {
    //                     this.tableData.splice(index, 1)
    //                     this.$message.success("删除成功！")
    //                 }
    //             })

    //         })

    //     }
    // },
});
</script>

<style lang="less" scoped>
.el-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    align-items: center;
}
</style>